<template>
  <div>
    <Banner :modlueData='homePageBanner' />

    <div class="section-title">
      <span> 推荐歌单</span>
      <RightOutlined />
    </div>

    <RecommendSongList :modlueData="recommendSongList" />

    <!-- <a-button @click="testApi(1)">登录状态</a-button>
    <a-button @click="testApi(2)"> 用户详情</a-button>
    <a-button @click="testApi(3)">账号信息</a-button> -->

  </div>
</template>
  
<script>
import { findMusicBanner, findMusicHomePage, findMusicPersonalized, loginStatus, getUserDetail, getAccentInfo } from '@/utils/api'
import Banner from './modules/banner'
import RecommendSongList from './modules/recommendSongList'
import { RightOutlined } from '@ant-design/icons-vue';
import storage from '@/utils/storage';
import { ref, getCurrentInstance } from 'vue'
export default {
  components: {
    Banner,
    RecommendSongList,
    RightOutlined
  },
  setup() {
    let homePageData = ref([])
    let homePageBanner = ref([])
    let recommendSongList = ref([])
    const { ctx } = getCurrentInstance()

    const _getData = () => {
      findMusicHomePage({}).then(
        res => {
          homePageData.value = res.blocks
          homePageBanner.value = filterHomeData("HOMEPAGE_BANNER").extInfo
          console.log('首页数据', res.blocks);
        })
    }
    const filterHomeData = (pageName) => {
      let pageData = homePageData.value.find(i => i.blockCode === pageName) || {}
      return pageData
    }
    const getBanner = () => {
      findMusicBanner({}).then(res => {
        console.log('banner', res);
        homePageBanner.value = res
      })
    }
    const getRecommendSongList = () => {
      findMusicPersonalized({
        limit: 11
      }).then(res => {
        // console.log('推荐歌单', res);
        recommendSongList.value = res
      })
    }
    const testApi = type => {
      let users = storage.get("users") || {};
      switch (type) {
        case 1:
          loginStatus({
          }).then(res => {
            console.log('登录状态', res);

          })
          break;
        case 2:
          getUserDetail({
            uid: users.account.id
          }).then(res => {
            console.log('用户信息', res);
          })
          break;
        case 3:
          getAccentInfo({}).then(res => {
            console.log('账号详情', res);
          })
          break;
        case 4:
          // ctx.$store.commit('setUsers', storage.get("users"))

          break;

        default:
          break;
      }
    }

    // _getData()
    getBanner()
    getRecommendSongList()


    return {
      homePageBanner,
      recommendSongList,
      testApi
    }

  }
}
</script>

<style lang="scss" scoped>
.section-title {
  margin: 10px 0;
  span {
    font-size: 22px;
    color: #000;
    font-weight: bold;
  }
}
</style>